<!-- Copyright 2017 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">

<dom-module id="oobe-reset-element">
  <template>
    <style include="oobe-dialog-host-styles">
      #reset-revert-spinner {
        padding-inline-end: 5px;
      }

      #tpmFirmwareUpdate {
        margin-top: 20px;
      }

      .illustration {
        max-height: 80%;
        max-width: 100%;
        object-fit: contain;
      }

      #tpmFirmwareUpdateContainer {
        cursor: default;
        line-height: 20px;
        pointer-events: auto;
      }
    </style>
    <link rel="stylesheet" href="chrome://resources/css/throbber.css">
    <oobe-adaptive-dialog id="resetDialog" role="dialog"
        aria-label$="[[i18nDynamic(locale, 'resetScreenAccessibleTitle')]]"
        footer-shrinkable>
      <iron-icon slot="icon" icon="oobe-32:alert"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'resetWarningTitle')]]
      </h1>
      <div slot="subtitle" class="powerwash-warning">
        <!-- Subtitle:  Restart required  -->
        <span hidden="[[!inRestartRequiredState_]]">
          [[i18nDynamic(locale, 'resetRestartMessage')]]
        </span>
        <!-- Subtitle: Powerwash state (depends on powerwash mode) -->
        <span hidden="[[!inPowerwashState_]]">
          <span>[[powerwashStateSubtitle_]]</span>
          <span>
            [[i18nDynamic(locale, 'resetWarningDataDetails')]]
          </span>
        </span>
        <!-- Help Link - Hidden when reverting/rolling back. -->
        <if expr="_google_chrome">
          <a id="powerwash-help-link-md" class="oobe-local-link"
              hidden="[[inRevertState_]]" is="action-link"
              on-click="onLearnMoreTap_">
            [[i18nDynamic(locale, 'learnMore')]]
          </a>
        </if>
        <!-- Spinner - Shown when the revert process is ongoing -->
        <div hidden="[[!inRevertState_]]">
          <div>
            [[i18nDynamic(locale, 'resetRevertPromise')]]
          </div>
          <div class="flex horizontal layout">
            <div id="reset-revert-spinner" class="throbber"></div>
            <div>
              [[i18nDynamic(locale, 'resetRevertSpinnerMessage')]]
            </div>
          </div>
        </div>
      </div>
      <div slot="content" class="flex layout vertical center center-justified">
        <!-- Reset screen illustration -->
        <img src="images/powerwash.svg"
            class="oobe-illustration" aria-hidden="true">
        <!-- TPM Update - Only shown during powerwash state -->
        <div id="tpmFirmwareUpdate" class="layout horizontal"
            hidden="[[!inPowerwashState_]]">
          <cr-checkbox id="tpmFirmwareUpdateCheckbox"
              checked="{{tpmUpdateChecked_}}"
              disabled="[[!tpmUpdateEditable_]]"
              hidden="[[!tpmUpdateAvailable_]]"
              on-change="onTPMFirmwareUpdateChanged_">
            <div id="tpmFirmwareUpdateContainer">
              <span>
                [[i18nDynamic(locale, 'resetTPMFirmwareUpdate')]]
              </span>
              <if expr="_google_chrome">
                <a class="oobe-local-link" is="action-link"
                    on-click="onTPMFirmwareUpdateLearnMore_">
                  [[i18nDynamic(locale, 'learnMore')]]
                </a>
              </if>
            </div>
          </cr-checkbox>
        </div>
      </div>
      <div slot="bottom-buttons">
        <!-- Cancel button, only disabled when reverting -->
        <oobe-text-button border on-click="onCancelTap_" text-key="cancelButton"
            id="resetCancel" disabled="[[inRevertState_]]"></oobe-text-button>
        <!-- Restart button -->
        <oobe-text-button inverse on-click="onRestartTap_" class="focus-on-show"
            id="restart" text-key="resetButtonRestart"
            hidden="[[!inRestartRequiredState_]]">
        </oobe-text-button>
        <!-- Powerwash button (depends on powerwash mode) -->
        <oobe-text-button inverse on-click="onPowerwashTap_"
            class="focus-on-show" id="powerwash"
            hidden="[[!inPowerwashState_]]"
            text-key="[[powerwashButtonTextKey_]]"
            disabled="[[powerwashButtonDisabled_]]">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>

    <!-- Powerwash confirmation dialog (depends on powerwash mode) -->
    <oobe-modal-dialog id="confirmationDialog" on-close="onDialogClosed_">
      <div slot="title">[[confirmationDialogTitle_]]</div>
      <div slot="content">[[confirmationDialogText_]]</div>
      <div slot="buttons">
        <oobe-text-button id="cancelButton" border on-click="onDialogCancelTap_"
            text-key="cancel"></oobe-text-button>
        <oobe-text-button inverse on-click="onDialogContinueTap_"
            id="confirmPowerwash"
            text-key="confirmResetButton"></oobe-text-button>
      </div>
    </oobe-modal-dialog>
  </template>
  <script src="oobe_reset.js"></script>
</dom-module>
